<template>
	<view class="addEditForm">
		<gui-back v-if="optionDisabled"></gui-back>
		<view class="data-form bgfff">
			<view class="data-form-item flex-ac">
				<text class="data-form-label f30 require">标题</text>
				<view class="data-form-input">
					<input type="text" :disabled="optionDisabled" v-model="dataForm.title"
						:placeholder="optionDisabled?'-':'请输入标题'" placeholder-class="plStyle" />
				</view>
			</view>
			<view class="data-form-item flex-ac">
				<text class="data-form-label f30 require">培训方式</text>
				<view class="data-form-input">
					<input type="text" :disabled="optionDisabled" v-model="dataForm.type"
						:placeholder="optionDisabled?'-':'请输入培训方式'" placeholder-class="plStyle" />
				</view>
			</view>
			<view class="data-form-item flex-ac">
				<text class="data-form-label f30 require">培训开始时间</text>
				<view class="data-form-input">
					<cpdd-date v-model="dataForm.startTime" :disabled="optionDisabled" :isTime="true"></cpdd-date>
				</view>
			</view>
			<view class="data-form-item flex-ac">
				<text class="data-form-label f30 require">培训结束时间</text>
				<view class="data-form-input">
					<cpdd-date v-model="dataForm.endTime" :disabled="optionDisabled" :isTime="true"></cpdd-date>
				</view>
			</view>
			<view class="data-form-item flex-ac">
				<text class="data-form-label f30 require">考核时间</text>
				<view class="data-form-input">
					<cpdd-date v-model="dataForm.examTime" :disabled="optionDisabled" :isTime="true"></cpdd-date>
				</view>
			</view>
			<view class="data-form-item flex-ac">
				<text class="data-form-label f30 require">授课老师</text>
				<view class="data-form-input">
					<input type="text" :disabled="optionDisabled" v-model="dataForm.teacher"
						:placeholder="optionDisabled?'-':'请输入授课老师'" placeholder-class="plStyle" />
				</view>
			</view>
			<view class="data-form-item flex-ac">
				<text class="data-form-label f30 require">培训地点</text>
				<view class="data-form-input">
					<input type="text" :disabled="optionDisabled" v-model="dataForm.address"
						:placeholder="optionDisabled?'-':'请输入培训地点'" placeholder-class="plStyle" />
				</view>
			</view>
		</view>
		<view class="gui-flex gui-rows gui-nowrap gui-align-items-center" style="padding: 30rpx 0 10rpx 0;">
			<view class="gui-title-line"></view>
			<text class="gui-primary-color gui-h6" style="padding-left:50rpx; padding-right:50rpx;">关联课程</text>
			<view class="gui-title-line"></view>
		</view>
		<view class="saveBtn add-class" @tap="handleOpenPopup" v-if="!optionDisabled">添加课程</view>
		<view class="table bgfff">
			<view class="gui-table gui-border-l gui-border-t">
				<view class="gui-theader gui-flex gui-rows gui-nowrap gui-bg-gray">
					<text class="gui-td gui-border-r gui-border-b gui-td-text gui-bold gui-text-center">课程</text>
					<!-- <text class="gui-td gui-border-r gui-border-b gui-td-text gui-bold gui-text-center">创建时间</text> -->
					<text class="gui-td gui-border-r gui-border-b gui-td-text gui-bold gui-text-center" v-if="!optionDisabled">操作</text>
				</view>
				<view class="gui-tbody gui-flex gui-rows gui-nowrap" v-for="(item, index) in classList" :key="index">
					<text class="gui-td gui-td-text gui-text-center gui-border-r gui-border-b">{{item.curriculumName}}</text>
					<!-- <text class="gui-td gui-td-text gui-text-center gui-border-r gui-border-b">{{item.createTime}}</text> -->
					<text class="gui-td gui-td-text gui-text-center gui-border-r gui-border-b cred" v-if="!optionDisabled" @tap="delClass(item,index)">删除</text>
				</view>
			</view>
		</view>
		<view class="right-area-footer2 flex-ac bgfff" v-if="!optionDisabled">
			<view class="saveBtn cancleBtn" @tap="handleCancle">取消</view>
			<view class="saveBtn" @tap="handleSubmit">保存</view>
		</view>

		<gui-popup ref="guipopupBottom" position="bottom" height="580rpx" :zIndex="999">
			<view class="gui-bg-white gui-box-shadow">
				<cpdd-topwave />
				<view class="search-window">
					<view class="search-form" style="padding: 0 30rpx 0 30rpx;">
						<view class="search-form-item flex-ac">
							<text class="search-form-label f30">课程名称：</text>
							<view class="search-form-input flex1">
								<input type="text" v-model="searchForm.name" placeholder="请输入课程名称"
									placeholder-class="plStyle" @input="inpuuting" />
							</view>
							<view class="saveBtn searchBtn" @tap="handleSearch">搜索</view>
						</view>
					</view>
				</view>
				<!-- 使用滚动区域来实现主体内容区域 -->
				<scroll-view :scroll-y="true" :scroll-top="scrollTops" :style="{height:mainHeight+'px'}"
					@scrolltolower="loadmorefun" @scroll="scroll">
					<!-- 刷新组件 -->
					<gui-refresh @reload="reload" ref="refreshcom"></gui-refresh>
					<view class="data-module">
						<gui-empty v-if="noData">
							<view slot="img" class="gui-flex gui-rows gui-justify-content-center">
								<!-- 请根据您的项目要求制作并更换为空图片 -->
								<image class="gui-empty-img" src="/static/noImg.png" mode="widthFix"></image>
							</view>
							<text slot="text" class="gui-text gui-block-text gui-text-center gui-margin-top"
								style="color:#666;padding: 0 100rpx;">暂无数据！</text>
						</gui-empty>
						<!-- 数据展示区域 -->
						<view class="data-list">
							<view class="data-item bgfff flex-ac" v-for="(item,index) in dataList" :key="item.id"
								@tap="changeClass(item,index)">
								<view class="checkBox">
									<text class="gui-icons primary-color" v-if="item.checked">&#xe7f8;</text>
									<text class="gui-icons" v-else>&#xe762;</text>
								</view>
								<view class="con flex1">
									<view v-for="(ele,idx) in columns" :key="ele.id">
										<view class="item-cell flex-ac" v-if="idx<5">
											<text class="data-item-label">{{ele.label}}：</text>
											<text class="data-item-val flex1 qoverDot">{{item[ele.prop]}}</text>
										</view>
									</view>
									<cpdd-collapse v-if="Object.keys(columns).length>5">
										<cpdd-collapse-item>
											<view v-for="(ele,idx) in columns" :key="ele.id">
												<view class="item-cell flex-ac" v-if="idx>=5">
													<text class="data-item-label">{{ele.label}}：</text>
													<text class="data-item-val flex1 qoverDot">{{item[ele.prop]}}</text>
												</view>
											</view>
										</cpdd-collapse-item>
									</cpdd-collapse>
								</view>
							</view>
						</view>
					</view>
					<!-- 加载组件 -->
					<gui-loadmore ref="loadmorecom"></gui-loadmore>
				</scroll-view>
				<view class="right-area-footer-place"></view>
				<view class="right-area-footer flex-ac bgfff">
					<view class="saveBtn cancleBtn" @tap="handleReset">清空</view>
					<view class="saveBtn" @tap="handleCheck">确定</view>
				</view>
			</view>
		</gui-popup>
	</view>
</template>

<script>
	import {
		columns
	} from '@/pages/aqpx/kcgl-warp/data.js'
	export default {
		data() {
			return {
				did: '',
				dataForm: { //表单
					title: '',
					type: '',
					startTime: '',
					endTime: '',
					examTime: '',
					teacher: '',
					address: '',
					params:{
						curriculums:[]
					}
				},
				optionDisabled: false,
				classList: [],
				query: {
					pageNum: 1,
					pageSize: 10,
				},
				mainHeight: 450,
				searchForm: { //筛选表单
					name: '',
					'params[createTimeStart]': '',
					'params[createTimeEnd]': ''
				},
				cpddDateRangeVal: '',
				dataList: [], //数据
				totalPage: 0,
				scrollTops: 0,
				scrollTimer: null,
				// 加载更多延迟
				loadMoreTimer: null,
				// api 加载状态记录
				apiLoadStatus: false,
				noData: false,
			}
		},
		computed: {
			columns() {
				return columns
			}
		},
		onLoad(options) {
			console.log('options', options);
			this.did = options.id || ''
			this.optionDisabled = options.op == 'look' ? true : false
			let title = options.op == 'look' ? '详情' : options.op == 'add' ? '新增' : '编辑'
			uni.setNavigationBarTitle({
				title
			})
			
			if (this.did) {
				this.loadDetail()
			}else{
				this.getData()
			}
		},
		methods: {
			handleReset() {
				this.dataList.filter(item => item.checked = false)
				this.classList=[]
				this.handleClosePopup()
			},
			handleCheck() {
				let arrCheck = this.dataList.filter(item => item.checked)
				this.classList = arrCheck.map(item => {
					return {
						curriculumId: item.id,
						curriculumName: item.name,
						createTime:item.createTime
					}
				})
				this.handleClosePopup()
				console.log('this.classList', this.classList);
			},
			delClass(item,idx){
				this.classList.splice(idx,1)
				let index = this.dataList.findIndex(obj=>obj.id==item.curriculumId)
				console.log('index',index);
				this.dataList[index].checked=false
			},
			changeClass(item, idx) {
				item.checked = !item.checked
			},
			loadDetail() {
				this.$http.get(`/training/plan/${this.did}`).then(res => {
					if (res.code == 200) {
						console.log('res', res);
						let result = res.data
						Object.keys(this.dataForm).forEach(key => this.dataForm[key] = result[key])
						console.log('this.dataForm', this.dataForm);
						this.classList =this.dataForm?.params?.curriculums.map(item=>{
							return {
								curriculumId: item.curriculumId,
								curriculumName: item.curriculumName,
								createTime:item.createTime
							}
						})
						this.getData()
					}
				})
			},
			handleCancle() {
				this.$u.back()
			},
			handleSubmit() {
				this.dataForm.params.curriculums = this.classList.map(item=>{
					return {
						curriculumId:item.curriculumId
					}
				})
				console.log('this.dataForm',this.dataForm);
				if (!this.dataForm.title) return this.$u.msg("请输入标题！");
				if (!this.dataForm.type) return this.$u.msg("请输入培训方式！");
				if (!this.dataForm.startTime) return this.$u.msg("请选择培训开始时间！");
				if (!this.dataForm.endTime) return this.$u.msg("请选择培训结束时间！");
				if (!this.dataForm.examTime) return this.$u.msg("请选择考核时间！");
				if (!this.dataForm.teacher) return this.$u.msg("请输入授课老师！");
				if (!this.dataForm.address) return this.$u.msg("请输入培训地点！");
				if (!this.classList.length) return this.$u.msg("请添加关联课程！");
				this.dataForm.startTime = this.dataForm.startTime+':00'
				this.dataForm.endTime = this.dataForm.endTime+':00'
				this.dataForm.examTime = this.dataForm.examTime+':00'
				this.realSumbit();
			},
			realSumbit() {
				if (this.did) {
					this.dataForm.id = this.did
					this.$http.put('/training/plan', this.dataForm).then(res => {
						if (res.code == 200) {
							uni.$emit('reFlashList')
							this.$u.msg('修改成功!')
							this.$u.back(1, 1000)
						}
					})
				} else {
					this.$http.post('/training/plan', this.dataForm).then(res => {
						if (res.code == 200) {
							uni.$emit('reFlashList')
							this.$u.msg('新增成功!')
							this.$u.back(1, 1000)
						}
					})
				}
			},
			handleOpenPopup() { //搜索点击
				this.$refs.guipopupBottom.open();
			},
			handleClosePopup() { //搜索点击
				this.$refs.guipopupBottom.close();
			},
			inpuuting(e) {
				if (!e.detail.value) this.reload(false);
			},
			handleSearch() {
				this.reload(false);
			},
			// 滚动区域滚动
			scroll: function(e) {
				if (this.scrollTimer != null) {
					clearTimeout(this.scrollTimer);
				}
				this.scrollTimer = setTimeout(() => {
					this.scrollTops = e.detail.scrollTop;
				}, 100);
			},
			// 刷新事件
			reload: function(isReload = true) {
				this.query.pageNum = 1;
				this.$refs.loadmorecom.stoploadmore();
				this.getData(isReload);
			},
			// 加载更多事件
			loadmorefun: function() {
				if (this.apiLoadStatus) {
					return;
				}
				// 获取加载组件状态看一下是否还能继续加载
				if (this.$refs.loadmorecom.loadMoreStatus != 0) {
					return;
				}
				// 保证触底只执行一次加载
				if (this.loadMoreTimer != null) {
					clearTimeout(this.loadMoreTimer);
				}
				this.loadMoreTimer = setTimeout(() => {
					this.$refs.loadmorecom.loading();
					// 此处开启加载动画执行加载数据的函数
					this.getData();
				}, 80);
			},
			// 新闻数据读取
			getData: function(isReload) {
				// 使用内部变量记录 当前索引，避免加载时用户切换引起的变量变化
				console.log('加载函数运行，页码 : ' + this.query.pageNum);
				// 更新 api 加载状态
				this.apiLoadStatus = true;
				this.$http.get('/training/curriculum/list', {
					...this.query,
					...this.searchForm
				}).then(res => {
					let result = res.rows
					if(this.did){
						let arr = this.classList.map(item=>item.curriculumId)
						result.forEach(itemR => {
							itemR.checked = arr.includes(itemR.id)?true:false
						})
					}else{
						result.filter(item => item.checked = false)
					}
					console.log('订单列表', result)
					this.totalPage = Math.ceil(res.total / this.query.pageSize);
					// 第一页
					if (this.query.pageNum == 1) {
						this.dataList = result;
						this.noData = result.length ? false : true
						if (this.query.pageNum > this.totalPage) {
							this.$refs.loadmorecom.nomore();
						}
					}
					// 之后的加载页
					else {
						this.$refs.loadmorecom.stoploadmore();
						console.log(this.query.pageNum >= this.totalPage);
						if (this.query.pageNum > this.totalPage) {
							this.$refs.loadmorecom.nomore();
						} else {
							this.dataList = this.dataList.concat(result);
						}
					}
					if (isReload) {
						this.$refs.refreshcom.endReload();
					}
					this.query.pageNum++;
					// 更新 api 加载状态
					this.apiLoadStatus = false;
					console.log(this.dataList);

				})
			},

		}
	}
</script>

<style lang="less">
	.searchBtn {
		width: 120rpx;
		height: 68rpx;
		border-radius: 0 10rpx 10rpx 0;
		font-size: 26rpx;
		position: relative;
		top: 6rpx;
	}

	.add-class {
		width: 200rpx;
		height: 55rpx;
		font-size: 26rpx;
		margin: 0 0 10rpx 30rpx;
		border-radius: 12rpx;
	}

	.checkBox {
		margin-right: 30rpx;
	}

	.gui-td {
		width: 100rpx;
		flex: 1;
		overflow: hidden;
		padding: 20rpx 10rpx;
		display: flexbox;
	}

	.gui-td-text {
		line-height: 60rpx !important;
		font-size: 24rpx;
	}
</style>